<!--
  使用示例
  @setProvince：将省份id传递给父组件
  @setCity：将城市id传递给父组件
  @setArea：将区域id传递给父组件
  :province：传递给组件初始省份id
  :city：传递给组件初始城市id
  :area: 传递给组件初始区域id
  <area-choose
    @setProvince="ruleForm.provinceId = arguments[0]"
    @setCity="ruleForm.cityId = arguments[0]"
    @setArea="ruleForm.areaId = arguments[0]"
    :province="ruleForm.provinceId"
    :city="ruleForm.cityId"
    :area="ruleForm.areaId">
  </area-choose>
-->
<template>
  <div>
    <div>
      <select @change="changeProvince" v-model="currProvince" style="border-radius: 0.05rem 0 0 0.05rem;">
        <option value="">省</option>
        <option v-for="item in provinces" :value="item.zone_id">{{item.zone_name}}</option>
      </select>
    </div>
    <div>
      <select @change="changeCity" v-model="currCity" style="border-radius:0;">
        <option value="">市</option>
        <option v-for="item in citys" :value="item.zone_id">{{item.zone_name}}</option>
      </select>
    </div>
    <div>
      <select @change="changeArea" v-model="currArea" style="border-radius:0 0.05rem 0.05rem 0">
        <option value="">区</option>
        <option v-for="item in areas" :value="item.zone_id">{{item.zone_name}}</option>
      </select>
    </div>
  </div>
</template>

<script type="es6">
import areaData from '../../assets/js/area.js'
export default {
  name: 'area-choose',
  props: {
    province: [String, Number],
    city: [String, Number],
    area: [String, Number],
  },
  data() {
    this.dataOrigin = areaData.getAreaObj();
    var provinces = this.dataOrigin;
    return {
      currProvince: this.province,
      currCity: this.city,
      currArea: this.area,
      provinces: this.dataOrigin,
      citys:[],
      areas:[]
    };
  },
  watch: {
    'province'(val, oldValue) {
      this.currProvince = val;
      var chooseProvince = this.provinces.filter(d => d.zone_id === this.currProvince);
      if(chooseProvince.length>0){
        this.citys = chooseProvince[0].junior;
      }
    },
    'city'(val, oldValue) {
      this.currCity = val;
      var chooseCity = this.citys.filter(d => d.zone_id === this.currCity);
      if(chooseCity.length>0){
        this.areas = chooseCity[0].junior;
      }
    },
    'area'(val, oldValue) {
      this.currArea = val;
    }
  },
  methods: {
    changeProvince() {
      var chooseProvince = this.provinces.filter(d => d.zone_id === this.currProvince);
      if(chooseProvince.length >0){
        this.citys = chooseProvince[0].junior;
      }else {
        this.citys = [];
      }
      this.currCity = '';
      this.areas = [];
      this.currArea = '';
      this.$emit('setProvince',this.currProvince);
      this.$emit('setCity',this.currCity);
      this.$emit('setArea',this.currArea);
    },
    changeCity() {
      this.currArea = '';
      var chooseCity = this.citys.filter(d => d.zone_id === this.currCity);
      if(chooseCity.length > 0){
        this.areas = chooseCity[0].junior;
      }else {
        this.areas = [];
      }
      this.currArea = '';
      this.$emit('setCity',this.currCity);
      this.$emit('setArea',this.currArea);
    },
    changeArea() {
      this.$emit('setArea',this.currArea);
    }
  }
};
</script>
